<template>
	<view class="upgrade">
		<SRV-topbar title="VIP" :isLeft="true"></SRV-topbar>
		<view class="now">
			<view class="icon">
				<image v-if="info.is_vip == 0" src="https://hdsq.aoorange.cn/attachment/icon/vipNo.png" mode="widthFix" @click="jump('level')"></image>
				<image v-if="info.is_vip == 1" src="https://hdsq.aoorange.cn/attachment/icon/vipYes.png" mode="widthFix" @click="jump('level')"></image>
				<text>{{info.vip_end_time}}</text>
			</view>
			<!-- <view class="assets" v-if="info.is_vip == 1">
				<view>当前积分：{{info.now_petty}}</view>
				<view>已发放互动券：{{info.send_hdq}}</view>
			</view> -->
		</view>
		<view class="top">
			<view class="inner" v-html="info.vipAgreement"></view>
		</view>
        <view class="toplist">
            <view class="title">年费日志</view>
            <view class="drawLi" style="margin-top: 40rpx;">
                <view style="width: 35vw;text-align: center;">付款方式</view>
                <view style="width: 20vw;text-align: center;">金额</view>
                <view style="width: 40vw;text-align: center;">时间</view>
            </view>
            <view class="drawLi" v-for="(tip, i) in info.vipList" :key="i" >
                <view style="width: 35vw;text-align: center;">{{tip.pay_type}}</view>
                <view style="width: 20vw;text-align: center;">{{tip.pay_money}}</view>
                <view style="width: 40vw;text-align: center;">{{tip.pay_time}}</view>
            </view>
        </view>
        <view class="toplist" v-if="info.drawProductList && info.drawProductList.length > 0">
            <view class="title">奖品列表</view>
            <view class="topnav" style="padding-top: 30rpx;">
        		<view class="goods" v-for="(item,index) in info.drawProductList" :key="index" @click="jump(item.jumpType, item.jumpLink)">
        			<!-- <view class="recommend" v-if="item.isRecommend">推荐</view>
        			<view class="hot" v-if="item.isHot">热门</view>
        			<view class="new" v-if="item.isNew">新品</view> -->
        			<view class="left_item"><image :src="item.picture" mode="widthFix"></image></view>
        			<view class="right_item">
        				<view class="right_con" style="height: 138rpx; line-height: 46rpx;">
        					<view class="oneline">
        						<text>{{item.name}}</text>
        					</view>
        				</view>
        				<view class="right_con">
        					<text class="rate">会员价：￥{{item.cost_price}}</text>
        					<text class="market" v-if="item.market_price > 0">市场价：￥{{item.market_price}}</text>
        				</view>
        			</view>
        		</view>
            </view>
        </view>
		<view class="bottom" :style="'height:' + bottomHeight + 'rpx;'" @click="subForm()">{{info.buttonName}}</view>
        
		<uni-popup ref="popup" type="bottom">
			<view class="pay_type">
				<image @click="closePopup()" class="close" :src="'https://hdsq.aoorange.cn/attachment/xcx/icon/close1.png'" mode="aspectFill"></image>
				<view class="title">选择支付方式</view>
				<view class="paypir">
					<text>应付金额</text>
					<text>￥{{pay_money}}</text>
				</view>
				<view class="line2"  v-if="info.use_hdq > 0 && (pay_money > 0 || payData.is_use_hdq == 1)"  @click="setUseOther()">
					<text>使用互动券 {{info.use_hdq}} 抵扣金额 ￥{{info.use_hdq}}</text>
					<view :class="payData.is_use_hdq == 1 ?'check':'nocheck'"></view>
				</view>
				<view class="line2" @click="selPayType(5)" v-if="pay_money > 0">
					<text>余额支付 - 当前余额：{{info.user_money}}</text>
					<view :class="payData.payment_type == 5 ?'sel':'nosel'"  v-if="Number(info.user_money) >= Number(pay_money)"></view>
					<text v-else>余额不足</text>
				</view>
				<view class="line2" @click="selPayType(1)" v-if="pay_money > 0">
					<text>在线微信支付</text>
					<view :class="payData.payment_type == 1 ?'sel':'nosel'" ></view>
				</view>
				<view :style="'height:' + bottomHeight + 'rpx;'" class="pay_bot" @click="subPayForm()">确认支付</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	var _self;
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	import commonPay from '../../static/commonPay.js';
	export default {
		data() {
			return {
				info: {
					is_vip: 0,
					vip_end_time: '',
					send_hdq: 0,
					now_petty: 0,
					vipAgreement: '',
					buttonName: '申请',
					use_hdq: 0,
					user_money : 0,
					pay_money : 0,
					pay_type: '',
					pay_id: 0,
					jumpFile : '',
				},
				pay_money: 0,
				user_hdq : 0,
				payData: {
					appkey: uni.getStorageSync('appkey'),
					'access-token': uni.getStorageSync('access-token'),
					pay_type: '',
					pay_id: 0,
					is_use_hdq: 0,
					payment_type: 1,
				},
				bottomHeight: 110,/* 底部按钮高度，避免iPhonex导航黑条 */
			}
		},
		methods: {
			numFilter (value) {
				let tempVal = parseFloat(value).toFixed(3);
				let realVal = tempVal.substring(0, tempVal.length - 1);
				return realVal;
			},
			getUpgrade(){
				serve.request({
					url: '/member/member/vip',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token'),
					},
					v: '/v3'
				}).then(res => {
					_self.info = res.data;
					_self.payData.pay_type = _self.info.pay_type;
					_self.payData.pay_id = _self.info.pay_id;
					_self.calculationTotalMoney();
				});
			},
			subForm() {
				_self.$refs.popup.open();
			},
			closePopup() {
				_self.$refs.popup.close();
			},
			setUseOther() {
				_self.payData.is_use_hdq = _self.payData.is_use_hdq == 1 ? 0 : 1;
				_self.calculationTotalMoney();
			},
			selPayType(type) {
				_self.payData.payment_type = type;
			},
			subPayForm() {
			    commonPay.payFun(_self.payData, '/pages/my/vip');
			},
			calculationTotalMoney() {
				let payMoney = _self.info.pay_money;
				if(_self.payData.is_use_hdq && _self.info.use_hdq > 0 && payMoney > 0) {
					payMoney = Number(payMoney) - Number(_self.info.use_hdq);
					payMoney = payMoney < 0 ? 0 : payMoney;
				}
				_self.pay_money = _self.numFilter(payMoney);
				_self.$forceUpdate();
			},
			jump(jump_type, jump_link) {
				common.jump(jump_type, jump_link);
			}
		},
		onLoad() {
			_self = this;
			if(uni.getSystemInfoSync().safeAreaInsets.top > 20){
				_self.bottomHeight = 150;
			}
			_self.getUpgrade();
		},
		onPullDownRefresh() {
			_self.getUpgrade();
		}
	}
</script>

<style scoped lang="scss">
	.upgrade {
        padding-bottom: 100rpx;
		.top {
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			padding: 30rpx;
			border-bottom: 10rpx solid #eaeaea;
			font-size: 32rpx;
			line-height: 64rpx;
			text {
				font-size: 28rpx;
				color: #666666;
				padding-bottom: 30rpx;
			}

			text:nth-child(1) {
				font-size: 32rpx;
				font-weight: bold;
			}
		}
		.now {
			border-bottom: 10rpx solid #eaeaea;
			padding: 30rpx 20rpx;
		}
		.icon {
			display: flex;
			align-items: center;
			font-size: 36rpx;
			font-weight: bold;
			color: #333333;
		
			image {
				width: 80rpx;
				height: 80rpx;
				margin-right: 10rpx;
			}
		}
		.assets{
			margin-left: 40rpx;
			line-height: 60rpx
		}
        
        .toplist {
            position: relative;
            box-sizing: border-box;
            width: 100%;
            padding: 30upx 0upx 0upx 0upx;
            border-bottom: 16upx rgba(251, 251, 253, 0.8) solid;
        
            .title {
                height: 24upx;
                margin-left: 30upx;
                padding-left: 20rpx;
                position: relative;
                float: left;
                font-size: 30upx;
                // text-align: center;
                line-height: 24upx;
                font-weight: bold;
            }
        
            .title::before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 6upx;
                height: 24upx;
                background: rgba(255, 198, 0, 1);
                border-radius: 2upx;
            }
        
            .topnav {
                display: flex;
                box-sizing: border-box;
                padding-bottom: 30upx;
                border-bottom: 16upx rgba(251, 251, 253, 0.8) solid;
                flex-wrap: wrap;
                width: 100%;
        
                .list {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    width: 25%;
                    padding-top: 64upx;
                    color: #23345B;
                    font-size: 24upx;
        
                    image {
                        width: 98upx;
                        height: 97upx;
                    }
                }
        		.goods{
        			display: flex;
        			box-sizing: border-box;
        			align-items: flex-start;
        			padding: 20rpx;
        			border-bottom: 1px solid #ebebeb;    
        		    position: relative;
        			.left_item {						
        				margin-right: 15rpx;
        				image {
        					width:180rpx;
        					height:180rpx;
        				}
        			}
        			.right_item {
        				flex: 1;
        				.right_con{
        					text-overflow: -o-ellipsis-lastline;
        					overflow: hidden;
        					text-overflow: ellipsis;
        					display: -webkit-box;
        					-webkit-line-clamp: 2;
        					line-clamp: 2;
        					-webkit-box-orient: vertical;
        					white-space:unset;
        					.oneline{
        						text-overflow: -o-ellipsis-lastline;
        						overflow: hidden;
        						text-overflow: ellipsis;
        						display: -webkit-box;
        						-webkit-line-clamp: 2;
        						line-clamp: 2;
        						-webkit-box-orient: vertical;
        						white-space:unset;
        					}
        					.name{
        						display: initial;
        						max-width: 300rpx;
        						font-size: 34rpx;
        					}
        					.rate{
        						color: #FFBC00;
        						font-size: 30rpx;
        						margin-top: 10rpx;
        					}
        					.market{
        					    color: #5f5b5b;
        					    font-size: 30rpx;
        					    margin-top: 10rpx;
        					    text-decoration: line-through;
        					}
        				}
        			}
        		}
            }
        }
	    .bottom{
			width: 100%;
			height: 100upx;
			line-height: 100upx;
			text-align: center;
			font-size: 46upx;
            text-indent: 100rpx;
            letter-spacing: 100rpx;
			color: rgba(255, 255, 255, 1);
			background: rgba(251, 202, 63, 1);
			bottom: 0upx;
			position: fixed;
			z-index: 9;
		}
        .drawLi {
            display: flex;
            margin: 20rpx;
            justify-content: space-between;
            animation: glow 800ms ease-out infinite alternate;
            padding: 10rpx;
            border-bottom: 1px dashed;
        }
		.pay_type{
			position: relative;
			width: 100%;
			background: #FFFFFF;
			padding-bottom: 140rpx;
			.close{
				position: absolute;
				width:23rpx;
				height:23rpx;
				right: 40rpx;
				top: 45rpx;
			}
			.title{
				width: 100%;
				text-align: center;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 36rpx;
				border-bottom: 1rpx rgba(251, 251, 253, 1) solid;
			}
			.paypir{
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				padding: 50rpx 0rpx 20rpx;
				font-size: 28rpx;
				text:last-child{
					color: #FF5F60;
					font-size: 40rpx;
					font-weight: bold;
					margin-top: 10rpx;
				}
			}
			.line2{
				width: 100%;
				box-sizing: border-box;
				padding: 36rpx;
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				color: #333333;
				border-bottom: 1rpx rgba(251, 251, 253, 1) solid;
				.txt{
					color: #999999;
				}
				
				.nosel {
					width: 36rpx;
					height: 36rpx;
					border: 1rpx solid rgba(60, 72, 104, 1);
					border-radius: 50%;
				}
				.sel {
					background-image: url(../../static/img/check.png);
					background-repeat: no-repeat;
					width: 40rpx;
					height: 40rpx;
					background-size: 100%;
				}
				.nocheck {
					width: 36rpx;
					height: 36rpx;
					border: 1rpx solid rgba(60, 72, 104, 1);
					border-radius: 20%;
				}
				.check {
					background: url(../../static/img/checkbox_check.png);
					background-repeat: no-repeat;
					width: 40rpx;
					height: 40rpx;
					background-size: 100%;
				}
			}
			.pay_bot {
			  width: 100%;
			  position: fixed;
			  left: 0;
			  bottom: 0;
			  height: 100rpx;
			  background: #FFBF0A;
			  color: #fff;
			  font-size: 46rpx;
              text-indent: 20rpx;
              letter-spacing: 20rpx;
			  line-height: 100rpx;
			  text-align: center;
			  border-radius: 0;
			  &::after{
				  border: none;
			  }
			}
		}
	}
</style>
